<template>
  <div  v-loading="dataLoading">
    <el-descriptions title="User Info">
    <el-descriptions-item label="姓名">周伟</el-descriptions-item>
    <el-descriptions-item label="年龄" >15岁</el-descriptions-item>
    <el-descriptions-item label="性别">男</el-descriptions-item>
    <el-descriptions-item label="身份证号">
      <el-tag size="small">357982013456789012</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="联系方式"
      >15956789012</el-descriptions-item
    >
  </el-descriptions>
  <div style="display:flex">
       <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="8"
        :xl="8"
        class="mb-[18px] mr-3"
        v-motion
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-card shadow="never" class="mt-2">
          <template #header>
            <a
              :class="titleClass"
              href="https://github.com/pure-admin/vue-pure-admin"
              target="_black"
            >
              <TypeIt
                :className="'type-it1'"
                :values="['睡眠分析']"
                :cursor="false"
                :speed="120"
              />
            </a>
          </template>
          <el-skeleton animated :rows="7" :loading="loading">
            <template #default>
              <Pie />
            </template>
          </el-skeleton>
        </el-card>
       
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="16"
        :xl="16"
        class="mb-[18px]"
        v-motion
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-card shadow="never" class="mt-2">
          <template #header>
            <a
              :class="titleClass"
              href="https://github.com/pure-admin/vue-pure-admin"
              target="_black"
            >
              <TypeIt
                :className="'type-it2'"
                :values="['睡眠分析']"
                :cursor="false"
                :speed="120"
              />
            </a>
          </template>
          <el-skeleton animated :rows="7" :loading="loading">
            <template #default>
              <Line />
            </template>
          </el-skeleton>
        </el-card>
         <div class="demo-rate-block">
    <span class="demonstration">睡眠评分</span>
    <el-rate v-model="rate"
    
    show-score
    text-color="#ff9900"
    score-template="{value} points"/>
  </div>
  <el-button type="primary" @click="handlejyClick" class="mb-1 ml-5" >评估报告</el-button>
      </el-col>
  </div>
  
     
   <el-dialog
    v-model="formVisible"
    title="健康趋势图"
    :width="680"
    draggable
    :before-close="closeDialog"
  >
   <Line/>
    <template #footer>
      <el-button type="primary" @click="handlejyClick" >报告生成</el-button>
      <el-button @click="closeDialog">关闭</el-button>
    </template>
  </el-dialog>
   <el-dialog
    v-model="formjyVisible"
    title="用户数据与睡眠建议"
    :width="680"
    draggable
    :before-close="closejyDialog"
   
  >
    <p><span style="font-weight: 800;">1. 心率数据	：</span><br/>
      睡眠阶段最低心率：55次/分钟 (深睡眠阶段)<br/>
睡眠阶段最高心率：85次/分钟 (REM睡眠阶段)<br/>
平均心率：70次/分钟<br/>
      <span style="font-weight: 800;">2. 心律变异数据</span><br/>
最低心律变异：30ms<br/>
最高心律变异：70ms<br/>
平均心律变异：50ms<br/>
这些数据显示该病人的心率和心律变异都在正常范围内。<br/>
      </p>
       <span style="font-weight: 800;">3. 睡眠建议</span><br/>
       <p>由于周先生的REM睡眠时间较短，建议尝试调整睡眠环境和习惯，例如保持房间的安静和黑暗，避免晚上过度刺激的活动和饮食，以提高REM睡眠的时间。<br/>
周先生应该建立规律的睡眠时间，尽量每天在同一时间入睡和唤醒。<br/>
对于周先生来说，保持足够的运动也是非常重要的，所以应该保证每天至少有30分钟的中等强度运动，如快步走、游泳或骑自行车。<br/>
最后，周先生应该避免在床上使用手机或其他电子设备，因为这些设备发出的蓝光可以干扰睡眠。</p>
    <template #footer>
      <el-button @click="closejyDialog">关闭</el-button>
    </template>
  </el-dialog>
  </div>
  
</template>

<script lang="ts" setup>
import TypeIt from "@/components/ReTypeit";
import { ref, watch,computed } from 'vue'
import Line from "./components/line.vue";
import Pie from "./components/Pie.vue";
import { Search } from '@element-plus/icons-vue'
import { message } from "@/utils/message";
const datevalue = ref('')
const tableData = ref()
let arrfilter = ref()
const formVisible = ref(false);
const formjyVisible = ref(false)
const dataLoading = ref(false);
const loading = ref<boolean>(true);
interface User {
  date: string,
    name: string,
    xinb: string,
    tz: string,
    xl: string,
    xy: string,
    phone: string,
    idnum:string,
    address: string,
}
const rate = ref(3)
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])
setTimeout(() => {
  loading.value = !loading.value;
}, 800);
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {  
  if (rowIndex === 2 || rowIndex === 3) {

    return 'warning-row'
  }
  return ''
}

const handleClick = () => {
  if (datevalue.value) {
      tableData.value = [
  {
    date: '2023-01-03',
    name: '陈志明',
    xinb: '男',
    tz: '60kg',
    xl: '70次/分钟',
    xy: '稳定',
    phone: '13835401380',
    idnum:'347821009123456789',
    address: '深圳市翻斗花园2-1',
  },
  {
    date: '2023-02-03',
    name: '陈志明',
    xinb: '男',
    sg: '180cm',
    tz: '60kg',
    xl: '80次/分钟',
    xy: '稳定',
    phone: '13835401380',
    idnum:'303874512345678901',
    address: '深圳市翻斗花园2-1',
  },
  {
    date: '2023-03-03',
    name: '陈志明',
    xinb: '男',
    sg: '180cm',
    tz: '60kg',
    xl: '110次/分钟',
    xy: '心律不齐',
    phone: '13835401380',
    idnum:'303874512345678901',
    address: '深圳市翻斗花园2-1',
  },
  {
    date: '2023-04-03',
    name: '陈志明',
    xinb: '男',
    sg: '180cm',
    tz: '60kg',
    xl: '108次/分钟',
    xy: '心律不齐',
    phone: '13835401380',
    idnum:'303874512345678901',
    address: '深圳市翻斗花园2-1',
  },
  {
    date: '2023-05-03',
    name: '陈志明',
    xinb: '男',
    sg: '180cm',
    tz: '60kg',
    xl: '88次/分钟',
    xy: '稳定',
    phone: '13835401380',
    idnum:'303874512345678901',
    address: '深圳市翻斗花园2-1',
  },
   {
    date: '2023-06-03',
    name: '陈志明',
    xinb: '男',
    sg: '180cm',
    tz: '60kg',
    xl: '89次/分钟',
    xy: '稳定',
    phone: '13835401380',
    idnum:'303874512345678901',
    address: '深圳市翻斗花园2-1',
  },
 
]
  }else{
    message("请选择时间段", { type: "warning" });
  }
}
const handlejyClick = () =>{
  formVisible.value = false;
  dataLoading.value = true
   setTimeout(() => {
      dataLoading.value = false;
  formjyVisible.value = true

    }, 1600);
}
const closeDialog = () => {
  formVisible.value = false;
};
const closejyDialog = () => {
  formjyVisible.value = false;
};
tableData.value = [
]



</script>
<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
::v-deep .el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9) !important;
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9) !important;
}
.demo-rate-block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
}
.demo-rate-block:last-child {
  border-right: none;
}
.demo-rate-block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>